import {Col, Row} from "antd";
import React  from "react";
import {
    ProjectInfo, updateProjectInfo, deleteProjectInfo
} from "../../../redux";
import {EditableText} from "../../editable-text";
import {EditableDateText} from "../../editable-date-text";
import {MyEditor} from "../../my-editor";
import {ControlBar} from "../../control-bar";
import {useAppDispatch} from "../../../redux/hooks";
import {ClsControl} from "../../block-control";

interface PropsType {
    index: number
    value: ProjectInfo
}

export const RProjExpItem: React.FC<PropsType> = ({
                                                            index,
                                                            value
                                                        }) => {
    const dispatch = useAppDispatch()

    return <ClsControl controlBar={
        <ControlBar
            style={{right: '-36px', top: '50%', flexDirection: 'column', transform: 'translateY(-50%)'}}
            displayConfig={{delete: true}}
            onClickDelete={() => {
                dispatch(deleteProjectInfo({index}))
            }}
        ></ControlBar>
    }>
        <Row gutter={10} justify={"space-between"}>
            <Col>
                <EditableDateText
                    defaultStartDate={value.beginDate}
                    defaultEndDate={value.endDate}
                    onDateChange={([startDate, endDate]) => {
                    dispatch(updateProjectInfo({
                        index, updateValue: { beginDate: startDate, endDate}
                    }))
                }}></EditableDateText>
            </Col>
            <Col>
                <EditableText
                    defaultText={value.projectName}
                    onTextChange={(projectName) => {
                    dispatch(updateProjectInfo({
                        index, updateValue: { projectName }
                    }))
                }} placeholder={'项目名称'}></EditableText>
            </Col>
        </Row>
        <Row gutter={10}>
            <Col>
                <EditableText
                    defaultText={value.jobTitle}
                    onTextChange={(jobTitle) => {
                    dispatch(updateProjectInfo({
                        index, updateValue: { jobTitle }
                    }))
                }} placeholder={'职位'}></EditableText>
            </Col>
        </Row>
        <MyEditor
            defaultHtml={value.detail}
            onContentChange={(html) => {
            dispatch(updateProjectInfo({
                index, updateValue: { detail: html }
            }))
        }}></MyEditor>
    </ClsControl>
}